<!-- 字段规则 -->
<template>
  <div class="tab2">
    <!-- 按纽栏组件 -->
    <div class="button-group">
      <a-button type="primary" icon="plus" @click="clickButton('add')" class="icon-button">新增</a-button>
      <a-button icon="edit" @click="clickButton('edit')" class="icon-button">编辑</a-button>
      <a-button icon="delete" @click="clickButton('del')" class="icon-button">删除</a-button>
    </div>
    <!-- 字段规则表格 -->
    <el-table
      :data="tab2TableData"
      highlight-current-row
      border
      height="calc(100% - 42px)"
      :row-style="{height:'40px'}"
      :cell-style="{padding:'0px'}"
      :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
      style="width: 100%">
      <slot v-for="(item,index) in tab2Columns">
        <el-table-column
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width"
          show-overflow-tooltip
          sortable>
        </el-table-column>
      </slot>
    </el-table>

    <!-- 字段规则弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalFRTitle"
      v-model="dialogFRVisible"
      @ok="handleOk">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-form-item label="数据表字段">
          <a-input v-decorator="[ 'Field_Name' ]" />
        </a-form-item>
        <a-form-item label="规则类型">
          <a-input v-decorator="[ 'FR_RuleType' ]" />
        </a-form-item>
        <a-form-item label="字段规则">
          <a-input v-decorator="[ 'FR_Rule' ]" />
        </a-form-item>
        <a-form-item label="说明">
          <a-input v-decorator="[ 'FR_Remark' ]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  data () {
    return {
      tab2TableData: [
        {
          Field_Name: 'PerKind',
          CN_name: '人员性质',
          FR_RuleType: 'display',
          FR_Rule: 'dictionary:PersonKind',
          FR_Remark: ''
        },
        {
          Field_Name: 'WA_AcceptDate',
          CN_name: '接受日期',
          FR_RuleType: 'display',
          FR_Rule: 'dateTime:YYYY-MM-DD',
          FR_Remark: ''
        },
        {
          Field_Name: 'WA_TurnDate',
          CN_name: '移交日期',
          FR_RuleType: 'display',
          FR_Rule: 'dateTime:YYYY-MM-DD',
          FR_Remark: ''
        },
        {
          Field_Name: 'AJType',
          CN_name: '案卷类别',
          FR_RuleType: 'display',
          FR_Rule: 'dictionary:AJType',
          FR_Remark: ''
        }
      ],
      tab2Columns: [
        {
          title: '数据表字段',
          field: 'Field_Name'
        },
        {
          title: '数据表字段中文说明',
          field: 'CN_name'
        },
        {
          title: '规则类别',
          field: 'FR_RuleType'
        },
        {
          title: '字段规则',
          field: 'FR_Rule'
        },
        {
          title: '说明',
          field: 'FR_Remark'
        }
      ],
      modalFRTitle: '',
      dialogFRVisible: false,
      form: this.$form.createForm(this)
    }
  },
  created () {},
  mounted () {},
  methods: {
    clickButton (val) {
      switch (val) {
        case 'add':
          this.modalFRTitle = '新增字段规则'
          this.dialogFRVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'edit':
          this.modalFRTitle = '编辑字段规则'
          this.dialogFRVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    handleOk () {}
  }
}
</script>

<style lang="less" scoped>
.tab2 {
  height: 100%;
  padding: 15px;
  .button-group {
    margin-bottom: 10px;
  }
}
</style>
